<!--单图上传组件/按钮-->
<template>
  <div style="display:flex;">
    <div v-show="coverOneUrl" class="demo-upload-list">
      <img :src="coverOneUrl">
      <div class="demo-upload-list-cover">
        <el-icon class="el-icon-zoom-in" @click.native="handlePictureCardPreview(coverOneUrl)"/>
        <el-icon class="el-icon-delete-solid" @click.native="handleRemove()"/>
      </div>
    </div>
    <div v-show="!coverOneUrl" class="upload-container">
      <el-upload class="avatar-uploader" action="#" accept=".png,.jpg,.jpeg,.gif,.webp" :show-file-list="false"
                 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus avatar-uploader-icon"/>
      </el-upload>
    </div>
    <div>
      <el-dialog width="30%" :visible.sync="dialogVisible" append-to-body>
        <img width="100%;height: 350px" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/styles/mixin.scss'
import {isBlank, isFlag} from '@/utils/util'
import {imageUtils} from '@/utils/imageUtil'

export default {
  props: ['imgUrl', 'size'],
  data() {
    return {
      dialogImageUrl: '',
      cover: '',
      disabled: false,
      visiable: false,
      dialogVisible: false,
      imageUrl: '',
      coverOneUrl: '',
      imgName: ''
    }
  },
  watch: {
    '$store.state.coverOneUrl': 'updateUrl'
  },
  methods: {
    isFlag,
    isBlank,
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file
      this.dialogVisible = true
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    updateUrl(imgUrl) {
      this.coverOneUrl = imageUtils(this.imgUrl, this.$store.state.coverOneUrl)
    },
    handleRemove() {
      this.$store.state.coverOneUrl = ''
      this.$store.state.coverOneUpload = {}
      this.coverOneUrl = ''
      this.updateUrl()
    },
    handleMaxSize(file, size) {
      if (isBlank(size) || isFlag(size, 0)) {
        size = 10
      }
      const fileSize = file.size / 1024 / 1024 < size
      return new Promise((resolve, reject) => {
        if (!fileSize) {
          this.$message.error(`文件过大,请不要超过${size}M.`)
          return resolve(false)
        } else {
          return resolve(true)
        }
      })
    },
    beforeAvatarUpload(file) {
      this.handleMaxSize(file, this.size).then(res => {
        if (isFlag(res, false)) {
          return null;
        }
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          file.url = reader.result
          this.$nextTick(() => {
            this.$store.state.coverOneUrl = file.url
          })
          this.$store.state.coverOneUpload = file
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  border: dashed;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  border: double;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
